<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>
      Media Queries: a simple mobile first design, adding a grid component
    </title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        width: 90%;
        margin: 2em auto;
        font:
          1em/1.3 Arial,
          Helvetica,
          sans-serif;
      }

      a:link,
      a:visited {
        color: #333;
      }

      nav ul,
      aside ul {
        list-style: none;
        padding: 0;
      }

      nav a:link,
      nav a:visited {
        background-color: rgb(207 232 220 / 20%);
        border: 2px solid rgb(79 185 227);
        text-decoration: none;
        display: block;
        padding: 10px;
        color: #333;
        font-weight: bold;
      }

      nav a:hover {
        background-color: rgb(207 232 220 / 70%);
      }

      .content {
        margin-bottom: 1em;
      }

      .related {
        background-color: rgb(79 185 227 / 30%);
        border: 1px solid rgb(79 185 227);
        padding: 10px;
      }

      .sidebar {
        background-color: rgb(207 232 220 / 50%);
        padding: 10px;
      }

      article {
        margin-bottom: 1em;
      }

      .grid {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }

      .grid li {
        border: 1px solid #666;
        padding: 10px;
      }

      @media screen and (min-width: 40em) {
        article {
          display: grid;
          grid-template-columns: 3fr 1fr;
          column-gap: 20px;
        }

        nav ul {
          display: flex;
        }

        nav li {
          flex: 1;
        }
      }

      @media screen and (min-width: 70em) {
        main {
          display: grid;
          grid-template-columns: 3fr 1fr;
          column-gap: 20px;
        }

        article {
          margin-bottom: 0;
        }

        footer {
          border-top: 1px solid #ccc;
          margin-top: 2em;
        }
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <header>
        <nav>
          <ul>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
            <li><a href="">Meet the team</a></li>
            <li><a href="">Blog</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <article>
          <div class="content">
            <h1>Veggies!</h1>
            <p>
              Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi
              welsh onion daikon amaranth tatsoi tomatillo melon azuki bean
              garlic.
            </p>

            <p>
              Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot
              courgette tatsoi pea sprouts fava bean collard greens dandelion
              okra wakame tomato. Dandelion cucumber earthnut pea peanut soko
              zucchini.
            </p>

            <ul class="grid">
              <li>
                <h2>Card 1</h2>
                <p>
                  Turnip greens yarrow ricebean rutabaga endive cauliflower sea
                  lettuce kohlrabi amaranth water spinach avocado daikon napa
                  cabbage asparagus winter purslane kale.
                </p>
              </li>
              <li>
                <h2>Card 2</h2>
                <p>
                  Celery potato scallion desert raisin horseradish spinach
                  carrot soko.
                </p>
              </li>
              <li>
                <h2>Card 3</h2>
                <p>
                  Lotus root water spinach fennel kombu maize bamboo shoot green
                  bean swiss chard seakale pumpkin onion chickpea gram corn pea.
                </p>
              </li>
              <li>
                <h2>Card 4</h2>
                <p>
                  Brussels sprout coriander water chestnut gourd swiss chard
                  wakame kohlrabi beetroot carrot watercress.
                </p>
              </li>
              <li>
                <h2>Card 5</h2>
                <p>
                  Corn amaranth salsify bunya nuts nori azuki bean chickweed
                  potato bell pepper artichoke.
                </p>
              </li>
            </ul>
          </div>
          <aside class="related">
            <p>
              All these veggies are brought to you by the
              <a href="https://veggieipsum.com/">Veggie Ipsum generator</a>.
            </p>
          </aside>
        </article>

        <aside class="sidebar">
          <h2>External vegetable-based links</h2>
          <ul>
            <li>
              <a
                href="https://www.thekitchn.com/how-to-cook-broccoli-5-ways-167323"
                >How to cook broccoli</a
              >
            </li>
            <li>
              <a href="https://www.bbcgoodfood.com/glossary/swiss-chard"
                >Swiss Chard</a
              >
            </li>
            <li>
              <a
                href="https://www.bbcgoodfood.com/recipes/collection/christmas-parsnip"
                >Christmas Parsnip Recipes</a
              >
            </li>
          </ul>
        </aside>
      </main>

      <footer>
        <p>&copy;2019</p>
      </footer>
    </div>
  </body>
</html>
